<template>
	<view class="turntable">
		<view class="" v-if="isopen"
			style="z-index: 99999; width: 600rpx;height:550rpx;background-color: #FFFFFF;box-sizing: border-box;position:fixed;left: 0;top: 200rpx;bottom: 0;right: 0;margin: auto;border-radius: 18rpx;">
			<view class="" style="line-height:60rpx;margin-left: 30rpx;height:470rpx;">
				<view class="" style="padding-top: 60rpx;box-sizing: border-box;">
					<text style="color: #E43D33;font-weight: bold;">{{$t('game.num')}}</text>
					{{$t('game.winone')}}<text style="color: #E43D33;font-weight: bold;">{{$t('game.wintwo')}}</text>

				</view>
				<view class="" style="padding-top: 20rpx;box-sizing: border-box;">
					{{$t('game.winthree')}}<text
						style="color: #E43D33;font-weight: bold;">{{$t('game.winfour')}}</text>{{$t('game.winfive')}}
				</view>
			</view>
			<view class="" @click="ok"
				style="height: 80rpx;background-color:#EDEDED;text-align: center;line-height: 80rpx;border-bottom-right-radius:16rpx ;border-bottom-left-radius:16rpx ; color:#007AFF;">
				{{$t('game.winok')}}
			</view>

		</view>
		<view class="" v-if="iscopy"
			style="z-index: 99999; width: 600rpx;height:550rpx;background-color: #FFFFFF;box-sizing: border-box;position:fixed;left: 0;top: 200rpx;bottom: 0;right: 0;margin: auto;border-radius: 18rpx;">
			<view class="" style="line-height:60rpx;margin-left: 30rpx;height:400rpx;">
				<view class="" style="padding-top: 60rpx;box-sizing: border-box;">
					{{$t('game.winsix')}}

				</view>
			</view>
			<view class="" @click="copy(lin)"
				style="height: 80rpx;background-color:rgb(254,99,0);align: center;line-height: 80rpx;color:#F5F5F5;border-radius: 16rpx;margin: auto;width: 500rpx;text-align: center;">
				{{$t('game.winseven')}}
			</view>

		</view>
		<view class="game" style="padding-top: 100px;" v-if="isShow">

			<pt-lottery ref="pt-lottery" lotteryBg="../../static/520.png" lotteryBtn="../../static/turntable/GO(1).png"
				:times="3" :prizeList="prizeList" @start="start" @end="end" @getUserList="getUserList">
			</pt-lottery>

		</view>
		<view class="banner">
			<!-- <view class="letter">
				<text>{{$t('game.bannerone')}}</text>
				<image src="../../static/turntable/what.png" mode="" class="img1" @click="what"></image>
			</view> -->
			<view class="letter2">
				<view>{{$t('game.bannertwo')}}</view>
				<view class="o">{{ this.cashBalance }}</view>
				<view>{{$t('game.banerthree')}}</view>
				<view class="oo">{{ this.gameCount }}</view>
				<!-- <image src="../../static/turntable/add.png" mode="" class="img2" @click="add"></image> -->
			</view>


			<!-- <view class="last" style="">
				<maoScroll :data="historyList" :showNum="showNum" :lineHeight="lineHeight"
					:animationScroll="animationScroll" :animation="animation">
					<template v-slot="{line}">
						<view class="line" style="display: flex; justify-content: space-between; padding: 30rpx;">
							<text>{{line.mobile}}</text>
							<text>{{line.name}}</text>
						</view>
					</template>
				</maoScroll>
			</view> -->





		</view>
		<view class="" style="height: 100rpx;">

		</view>
	</view>


</template>

<script>
	// import barr from '../../components/bar/bar.vue'
	import zyGrid from '@/components/pt-lottery/pt-lottery.vue'
	import maoScroll from '@/components/mao-scroll/mao-scroll.vue';
	import {
		luckydraw,
		luckydrawlist,
	} from '@/api/jogos.js';
	
	import {
		getInfo
	} from '@/api/login';
	
	import {
		mapGetters
	} from 'vuex'
	
	export default {
		
		components: {
			...mapGetters(['userInfo', 'token']),
			zyGrid,
			maoScroll
		},
		data() {
			return {
				lin: "",
				iscopy: false,
				isopen: false,
				URL_IMG: this.URL_IMG,
				isShow: false,
				title: 'Hello',
				data: [],
				count: 30,
				showNum: 5,
				lineHeight: 60,
				cashBalance: 0,
				gameCount: 0,
				animationScroll: 800,
				animation: 2000,
				prizeList: [],
				prizeIndex: 0,
				uid: '',
				historyList: [],
				fURL: '',
				item: '',
			}
		},
		// created() {
		// 	this.createData();
		// },
		onShow() {
			// let self = this;
			// // this.uid = uni.getStorageSync('uid');
			this.getUserList()

			// this.fURL = window.location.host
			// uni.setTabBarItem({
			// 	index: 2,
			// 	text: this.$t('zhu.c'),
			// })
		},
		onLoad(data) {
			this.createData();
			// setTimeout(function() {
			// 	console.log('妯℃嫙浠庣綉涓婅幏鍙栨暟鎹鑺辫垂浜绉);
			// 	self.createData();
			// 	console.log(self.data, '鑾峰彇鍒扮殑鏁版嵁');
			// }, 1000);
		},
		methods: {
			home() {
				uni.navigateTo({
					url: '../index/index'
				})
			},
			earning() {
				uni.navigateTo({
					url: '../product/product'
				})
			},
			game() {
				uni.navigateTo({
					url: '../game/game'
				})
			},
			share() {
				uni.navigateTo({
					url: '/pages/news/index'
				})
			},
			my() {
				uni.navigateTo({
					url: '../my/my'
				})
			},
			what() {
				this.isopen = !this.isopen
			},
			ok() {
				this.isopen = !this.isopen
			},
			add() {
				this.iscopy = !this.iscopy
			},

			copy(item) {
				//提示模板
				//uni.setClipboardData方法就是讲内容复制到粘贴板
				uni.setClipboardData({
					data: `${this.fURL}/#/pages/reset/reset?inviteCode=${item.inviteCode}`, //要被复制的内容
					success: () => { //复制成功的回调函数
						console.log(`${this.fURL}/#/pages/reset/reset?inviteCode=${item.inviteCode}`)
						uni.showToast({ //提示
							icon: "success",
							title: this.$t('game.scripta'),
						})
					}
				});
				this.iscopy = !this.iscopy


			},
			async start() {
				uni.showLoading();
				let self = this
				let {
					code,
					data
				} = await luckydraw()
				if (code == 200) {
					uni.hideLoading();
					
					console.log(data)
					
					this.prizeList.forEach((el, index) => {
						if (el.id == data) {
							this.prizeIndex = index
							this.$refs['pt-lottery'].init(this.prizeIndex)
						}
					})

				} else {
					uni.showToast({
						icon: 'none',
						title: this.$t('game.scriptb'),
					})
				}
			},
			end() {
				var _that = this
				uni.showToast({
					icon: 'none',
					title: this.$t('game.scriptc') + _that.prizeList[_that.prizeIndex].prizeName
				})
			},
			// 鑾峰彇淇℃伅
			async getUserList() {
				let {
					code,
					data
				} = await getInfo()
				if (code == 200) {
					
					// console.log(JSON.stringify(data));
					
					this.cashBalance = data.money
					this.gameCount = data.gameCount
					// this.historyList = data
					// this.lin = data
				}

			},

			async createData() {

				uni.showLoading();
				let self = this
				let {
					code,
					data
				} = await luckydrawlist()
				if (code == 200) {
					uni.hideLoading();

					console.log(data);

					let arr = []
					for (let i in data) {
						arr.push({
							id: data[i]['id'],
							prizeName: data[i]['name'],
							prizeIcon: data[i]['logo']
						})
					}

					self.prizeList = arr
					this.isShow = !this.isShow

				}

			}
		}
	}
</script>

<style lang="scss">
	.game {
		position: relative;
		margin-left: 50rpx;
		margin-right: 50rpx;
	}

	.turntable {
		height: 1400rpx;
		background: linear-gradient(268deg, #EC8661 0%, #D33B2D 100%);
	}

	.di {
		width: 800rpx;
		height: 200rpx;
		position: absolute;
		left: 30rpx;
		top: 660rpx;
	}

	.banner {


		color: #333333;
		font-weight: 500;
		font-family: PingFang SC;
		font-size: 30rpx;

		.last {
			background-color: #FFFFFF;
			margin: auto;
			border-radius: 16rpx;
			margin-top: 25rpx;
			margin-left: 41rpx;
			margin-right: 42rpx;
		}

		.letter {

			height: 81rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			text-align: center;
			line-height: 80rpx;
			position: relative;
			margin-left: 41rpx;
			margin-right: 42rpx;
			margin-bottom: 20rpx;
			margin-top: 20rpx;

			.img1 {
				width: 40rpx;
				height: 40rpx;
				position: absolute;
				top: 20rpx;
				right: 50rpx;

			}
		}

		.letter2 {
			display: flex;
			justify-content: space-around;
			height: 81rpx;
			line-height: 80rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-left: 41rpx;
			margin-right: 42rpx;
			// position: relative;
			color: #333333;
			align-items: center;


			.o {
				width: 200rpx;
				height: 41rpx;
				background: #D75549;
				border-radius: 20rpx;
				line-height: 41rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 41rpx;
				text-align: center;
				// position: absolute;
				// left: 180rpx;
				// top: 20rpx;
			}

			.oo {
				width: 100rpx;
				height: 41rpx;
				background: #D75549;
				border-radius: 20rpx;
				line-height: 41rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 41rpx;
				text-align: center;
				// position: absolute;
				// left: 420rpx;
				// top: 20rpx;
			}

			.img2 {
				width: 40rpx;
				height: 40rpx;
				// position: absolute;
				// top: 20rpx;
				// right: 50rpx;
			}
		}
	}
</style>